<template>
  <div class="begin-execute-content">
    <div class="left-menu">
      <el-tabs v-model="actuationName" @tab-click="changeSelectActuation">
        <el-tab-pane v-for="status in actuationStatus" :key="status.desc" :label="status.name" :name="status.desc">
          <div :class="status.desc">
            <div>
              <el-input placeholder="输入患者姓名" suffix-icon="el-icon-search" v-model="searchPatient"/>
            </div>
            <div @click="selectActuation(item)" class="actuation-item" :class="{'actuation-item--active':selectedActuation.id==item.id}" v-for="item in actuationList" :key="item.id">
              <div class="actuation-title">
                <div>
                  <span>{{ item.id }}</span>
                  <span class="user-name">{{ item.name }}</span>
                </div>
                <div class="actua-status">
                  <span>{{ item.date }}</span>
                  <span class="actua-details">{{ item.status }}</span>
                </div>
              </div>
              <div class="actuation-desc">{{ item.diagnose }}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="right-body">
      <div class="title">
        <div class="title-left">
          <span class="t1">项目执行</span>
        </div>
        <div class="title-right">
          <span class="t1" @click="completeOrder">完成开单</span>
          <span class="t2">取消</span>
        </div>
      </div>
      <div class="patient-info">
        <div>
          <span class="s1">{{selectedActuation.name}}</span>
          <span class="s2">男 22岁 13566666666</span>
        </div>
        <div>
          <el-input placeholder="输入患者姓名" suffix-icon="el-icon-search" v-model="searchPatient"/>
        </div>
      </div>
      <div class="diagnose-table">
        <div class="table">
          <div class="table-title">
            <div class="no"></div>
            <div class="diagnose-title-width" style="width: 300px">诊断</div>
            <div class="diagnose-title-width">开单人</div>
            <div class="diagnose-title-width">开单时间</div>
          </div>
          <div class="table-content">
            <div v-for="(item,index) in diagnoseData" :key="index">
              <div class="item">
                <div class="no">{{ index + 1 }}</div>
                <div class="diagnose-title-width" style="width: 300px">
                  <el-popover popper-class="diagnose_popover" placement="bottom-start" width="400" trigger="click">
                    <div class="diagnose-content">
                      <div @click="selectDiagnose(diagnose)" :class="{'diagnose-item-selected':diagnose.isSelected}" class="diagnose-item" v-for="(diagnose,index) in diagnoseList" :key="index">{{diagnose.name}}</div>
                    </div>
                    <el-input slot="reference" v-model="diagnoseInfo" placeholder="请开具临床诊断信息" suffix-icon="el-icon-search"/>
                  </el-popover>
                </div>
                <div class="diagnose-title-width">{{ item.doctor }}</div>
                <div class="diagnose-title-width">{{ item.date }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="medicine-table">
        <div class="medicine-table-title">
          <div style="width: 300px">
            <el-input v-model="searchProject" placeholder="请输入项目名称或项目拼音码" clearable suffix-icon="el-icon-search"/>
          </div>
          <div>
            <el-popover v-model="popoverVisible" popper-class="begin-execute-popover" placement="bottom" width="600" trigger="click">
              <el-table :data="projectList" border header-cell-class-name="content-table-title">
                <el-table-column type="index"/>
                <el-table-column property="type" label="类型"></el-table-column>
                <el-table-column property="name" label="项目名称"></el-table-column>
                <el-table-column label="执行划扣">
                  <template><span>需要</span></template>
                </el-table-column>
                <el-table-column property="num" label="数量"></el-table-column>
                <el-table-column property="price" label="销售价格"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="item"><span @click="selectProject(item.row)" class="operation">选择</span></template>
                </el-table-column>
              </el-table>
              <div slot="reference" class="add-project">+添加项目</div>
            </el-popover>
          </div>
          <div class="use-combo" @click="addCombo">使用套餐</div>
          <div class="desc">调用套餐或使用已购买套餐</div>
        </div>
        <div class="table">
          <div class="table-title">
            <div class="no"></div>
            <div class="title-width">项目</div>
            <div class="title-width">类型</div>
            <div class="title-width">单价</div>
            <div class="title-width">执行数量</div>
            <div class="title-width">金额</div>
            <div class="title-width">操作</div>
          </div>
          <div class="table-content">
            <div v-for="(item,index) in comboList" :key="index">
              <div class="item">
                <div class="no">{{ index + 1 }}</div>
                <div class="title-width">{{ item.name }}</div>
                <div class="title-width">{{ validateNull(item.projects) ? item.type : '' }}</div>
                <div class="title-width">¥{{ item.price.toFixed(2) }}</div>
                <div class="title-width">{{ !validateNull(item.projects) ? '' : item.num }}</div>
                <div class="title-width">{{item.isPaid ? '---' : '¥'+item.amount.toFixed(2)}}</div>
                <div @click="deleteProject(item)" class="title-width delete-project">
                  {{ !validateNull(item.projects) ? '' : '删除' }}
                </div>
              </div>
              <div class="item" v-for="(child,cindex) in item.projects" :key="cindex">
                <div class="no"></div>
                <div class="title-width" style="color: rgba(0,0,0,0.45);">{{ child.name }}</div>
                <div class="title-width">{{ child.type }}</div>
                <div class="title-width">---</div>
                <div class="title-width">{{ child.num }}</div>
                <div class="title-width">---</div>
                <div @click="deleteProject(item,child)" class="title-width delete-project">删除</div>
              </div>
            </div>
          </div>
        </div>
        <div class="total-project-amount">
          <div class="t1">合计金额：2 个项目</div>
          <div class="t2">￥498.00</div>
        </div>
      </div>
      <div style="padding: 0 20px 20px;background: #fff">
        <div class="member-discount">
          <div class="t1">
            <div class="desc">会员优惠价</div>
            <div class="amount">￥398.00</div>
          </div>
          <div class="t2">
            <span class="title1">会员</span>
            <span class="desc">VIP金卡会员</span>
            <span class="update">修改</span>
          </div>
          <div class="t3">
            <div>
              <span class="title1">折扣</span>
              <span class="desc">【会员】金卡会员卡折扣权益</span>
              <span class="update">修改</span>
            </div>
            <div class="discount">-￥100.00</div>
          </div>
        </div>
      </div>
    </div>
    <selectCombo ref="selectCombo" @selectComboProject="selectComboProject"></selectCombo>
    <completeOrder ref="completeOrder"></completeOrder>
  </div>
</template>

<script>
import selectCombo from './dialog/selectCombo'
import completeOrder from './dialog/completeOrder'
import { validatenull } from '@/utils/validate'

export default {
  name: 'begin',
  components: {
    selectCombo, completeOrder
  },
  data () {
    return {
      actuationName: 'wait',
      searchPatient: '',
      searchProject: '',
      actuationStatus: [
        { name: '待执行', desc: 'wait' }, { name: '已执行', desc: 'history' }, { name: '全部', desc: 'all' }
      ],
      diagnoseInfo: '',
      diagnoseList: [],
      popoverVisible: false,
      selectedActuation: {},
      actuationList: [],
      diagnoseData: [],
      projectList: [{ id: 4, name: '中医体质检测', type: '检查检测', price: 200, amount: 200, num: '5' }],
      comboList: [
        { id: 1, name: '开药', type: '处方', price: 200, amount: 200, num: '4' },
        { id: 2, name: '中医体质检测', type: '检查检测', price: 200, amount: 200, num: '2', isPaid: true },
        {
          id: 3,
          name: '脏腑气机调衡(套餐)',
          type: '处方',
          price: 200,
          amount: 200,
          num: '2',
          projects: [{ id: 4, name: '中医体质检测', type: '检查检测', price: 200, amount: 200, num: '5' }]
        }
      ]
    }
  },
  created () {
    for (let i = 1; i < 9; i++) {
      this.diagnoseList.push({ id: i, name: '虚劳' + i })
    }
    for (let i = 1; i < 7; i++) {
      this.actuationList.push(
        {
          id: i + 1,
          name: '李涵' + i,
          statusCode: 'wait',
          status: '待执行',
          date: '02/0' + (i + 1)
        }
      )
    }
    this.selectedActuation = this.actuationList[0]
    this.diagnoseData = [{ doctor: '李丽', date: '2021-01-23', amount: 200, status: this.selectedActuation.status }]
  },
  methods: {
    changeSelectActuation (tab) {
      this.actuationList = []
      const statusCode = tab.name
      const status = tab.label
      for (let i = 0; i < 6; i++) {
        this.actuationList.push(
          {
            id: i + 1,
            name: '李涵' + i,
            statusCode: statusCode !== 'all' ? statusCode : (i % 2 === 0 ? 'history' : 'wait'),
            status: statusCode !== 'all' ? status : (i % 2 === 0 ? '已执行' : '待执行'),
            diagnose: '虚劳' + i,
            date: '02/0' + (i + 1)
          }
        )
      }
      this.selectedActuation = this.actuationList[0]
      this.diagnoseData = [{ doctor: '李丽', date: '2021-01-23', amount: 200, status: this.selectedActuation.status }]
    },
    selectActuation (item) {
      this.selectedActuation = item
      this.diagnoseData = [{ doctor: '李丽', date: '2021-01-23', amount: 200, status: this.selectedActuation.status }]
    },
    selectComboProject (selectedCombo) {
      this.comboList.push(...selectedCombo)
    },
    selectDiagnose (diagnose) {
      this.diagnoseList = this.diagnoseList.map(item => {
        if (item.id === diagnose.id) {
          item.isSelected = !item.isSelected
        }
        return item
      })
      const diagnoseStrList = this.diagnoseList.filter(item => item.isSelected).map(item => item.name)
      this.diagnoseInfo = diagnoseStrList.length > 0 ? diagnoseStrList.join(',') : ''
    },
    selectProject (project) {
      console.log(project)
      this.popoverVisible = false
    },
    completeOrder () {
      this.$refs.completeOrder.show()
    },
    addCombo () {
      this.$refs.selectCombo.show()
    },
    deleteProject (combo, project) {
      console.log(combo)
      console.log(project)
      if (validatenull(project) || combo.projects.length === 1) {
        this.comboList = this.comboList.filter(item => {
          return item.id !== combo.id
        })
      } else {
        combo.projects = combo.projects.filter(item => {
          return item.id !== project.id
        })
      }
    },
    validateNull (val) {
      return validatenull(val)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables";
.begin-execute-content {
  display: flex;
  .left-menu {
    width: 20%;
    background: #fff;
    padding: 10px 20px;
    margin: 10px;
    .wait, .history, .all{
      .actuation-item--active{
        border: 1px solid $mainBg;
        box-shadow: 2px 0 6px rgba(0,21,41,.15);
      }
      .actuation-item{
        margin-top: 15px;
        cursor: pointer;
        .actuation-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 15px;
          background: #F5FBFF;

          .user-name {
            margin-left: 10px;
            color: rgba(0, 0, 0, 0.70);
          }
          .actua-status{
            font-size: 12px;
            color: rgba(0,0,0,0.45);
            .actua-details{
              margin-left: 10px;
              color: #F59C2E;
            }
          }
        }

        .actuation-desc {
          color: #7b7d82;
          padding: 10px 15px;
        }
      }
    }
  }
  .right-body {
    width: 80%;
    margin: 10px;
    .title {
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 20px 30px;
      .title-left {
        letter-spacing: 0;
        font-weight: 500;
        .t1 {
          font-size: 16px;
          color: rgba(0, 0, 0, 0.70);

        }
        .t2 {
          display: inline-block;
          font-size: 12px;
          color: #94E193;
          border: 1px solid #94E193;
          padding: 2px 15px;
          transform: rotate(20deg) translate(25px, 5px);
        }
      }
      .title-right{
        .t1{
          background: $mainBg;
          border-radius: 2px;
          padding: 6px 10px;
          color: #FFF;
          cursor: pointer;
        }
        .t2{
          margin-left: 10px;
          border: 1px solid $mainBg;
          border-radius: 2px;
          padding: 5px 20px;
          color: $mainBg;
          cursor: pointer;
        }
      }
    }
    .patient-info {
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 30px;
      .s1{font-size: 15px}
      .s2{
        color: #7b7d82;
        margin-left: 10px;
      }
    }
    .diagnose-table {
      background: #fff;
      margin-top: 16px;
      padding: 20px;
    }
    .table {
      .no {
        width: 7%;
        text-indent: 16px;
      }
      .diagnose-title-width{
        width: 31%;
        height: 100%;
        padding: 0 5px;
        border-left: 1px solid #EBEEF5;
      }
      .title-width {
        width: 15.5%;
        height: 100%;
        margin: 0 5px;
      }
      .delete-project{
        color: $mainBg;
        cursor: pointer
      }

      .table-title {
        color: #909399;
        font-weight: bold;
        display: flex;
        align-items: center;
        background: #F3F6FA;
        padding: 12px 0;
      }

      .table-content {
        color: #606266;
        border-left: 1px solid #EBEEF5;
        border-right: 1px solid #EBEEF5;

        .item {
          padding: 12px 0;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #EBEEF5;
        }
      }
    }
    .medicine-table {
      background: #fff;
      margin-top: 16px;
      padding: 20px;
      .medicine-table-title {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .add-project {
          padding: 5px 10px;
          font-size: 14px;
          color: $mainBg;
          border: 1px solid $mainBg;
          border-radius: 2px;
          margin-left: 15px;
          cursor: pointer;
        }
        .use-combo {
          padding: 5px 10px;
          font-size: 14px;
          color: $mainBg;
          border: 1px solid $mainBg;
          border-radius: 2px;
          margin-left: 20px;
          cursor: pointer;
        }
        .desc {
          font-size: 12px;
          color: #858788;
          margin-left: 10px;
        }
      }
      .total-project-amount {
        display: flex;
        justify-content: flex-end;
        padding: 20px;
        border: 1px solid #EEF1F5;
        border-top: none;
        .t1 {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.70);
        }
        .t2 {
          font-size: 18px;
          color: rgba(0, 0, 0, 0.70);
          margin-left: 40px;
        }
      }
    }
    .member-discount {
      font-size: 14px;
      background: #FFFBF9;
      padding: 20px 30px;
      .t1 {
        display: flex;
        justify-content: flex-end;
        border-bottom: 1px solid #e8e3e3;
        padding-bottom: 10px;
      }
      .t2 {
        padding-top: 10px;
      }
      .t3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
      }
      .desc {
        color: rgba(0, 0, 0, 0.70);
      }
      .title1 {
        color: #FF2929;
      }
      .amount {
        font-size: 18px;
        color: #F76232;
        font-weight: bold;
        margin-left: 15px;
      }
      .update {
        cursor: pointer;
        color: $mainBg;
      }
    }
  }
}
</style>
